<template>
  <div class="hv-designer-prop-panel-container" v-hv-scrollbar>
    <component
      :is="comp.propertyComponent"
      v-model:compData="comp"
      v-if="comp && comp.propertyComponent"
    />
    <hv-custom-empty description="请选择组件！" v-else />
  </div>
</template>

<script lang="ts">
import { visualPropertyComponents } from "@/visual/configs/dashboard-visual-config/dashboard-visual-comp-config";
import DashboardEvent from "@/visual/events/dashboard-event";
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  name: "DesignerComponentPropPanel",
  components: {
    ...visualPropertyComponents,
  },
  setup() {
    const comp = ref<any>();

    /**
     * 初始化
     */
    const init = () => {
      //当前属性
      DashboardEvent.getConfigPanelCurrentPropEvent().subscribe((data: any) => {
        comp.value = data.comp;
      });

      //删除图层对应的节点时清空当前属性配置页面
      DashboardEvent.getDeleteLayerNodeEvent().subscribe((delNode: any) => {
        if (comp.value && comp.value.id === delNode.id) {
          comp.value = undefined;
        }
      });
    };

    onMounted(() => {
      init();
    });

    return {
      comp,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./DesignerComponentPropPanel.less";
</style>
